<template>
	<view class="order-container u-page">
		<u-sticky>
			<view class="bg-white">
				<view class="p-20">
					<u-search searchIconSize="32" placeholder="请输入单号" v-model="keyword" @search="search" @custom="search"></u-search>
				</view>
				<u-tabs @change="tabChange" :current="current" :list="tabList" :scrollable="false" lineColor="#FF3B26" lineWidth="120rpx" lineHeight="4rpx"></u-tabs>
			</view>
		</u-sticky>
		<view class="order-list">
			<view class="order-item" v-for="(item,index) in list" :key="`order-${item.id}`" @click="$go('/admin/order-detail/order-detail?id='+item.id+'&ordertype='+(4))">
				<view class="flex jus-b p-20 bg-white">
					<view class="flex jus-b ali-c">
						<u-icon name="order" class="text-primary" size="38" color="#ff3b26"></u-icon>
						<view class="flex-1 ml-10 text-lg">
							<view>订单号：{{ item.order_sn }}</view>
						</view>
					</view>
					<!-- status订单状态 0待付款 1待发货/待核销/待派单 2待收货/已核销/已派单 3待评价  4已取消  5售后退款中  6已完成  7售后完成  -->
					<view class="text-primary">{{ item.status==0?'待付款':item.status==1?'待核销':item.status==2?'已核销':item.status==5?'售后退款中':item.status==7?'售后完成':item.status==4?'已取消':'已完成'}}</view>
				</view>
				<view class="order-product" v-if="item.goods.length">
					<view class="order-product-item" v-for="good in item.goods">
						<view class="image">
							<image :src="good.url" mode="aspectFit" />
						</view>
						<view class="flex-1">
							<view class="line-two">{{good.goods_name || ''}}</view>
							<view class="flex jus-b mt-10 jus-b">
								<view>
									<text class="text-primary text-lgs">¥{{ good.goods_price || '0.00' }}</text>
									<text>/元</text>
								</view>
								<view class="flex ali-c">
									<u-icon name="close" size="26" color="#000"></u-icon>
									<text>{{ good.goods_num || '1' }}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="text-gray text-sm p-20 bg-white flex flex-col gap-10">
					<view class="flex">手机号：{{item.mobile||''}}</view>
					<view class="flex">下单时间：{{ item.addtime }}</view>
					<!-- <view>商品总数</view> -->
					<view class="text-lg flex jus-b">
						<text class="text-black">订单总价</text>
						<text class="text-primary">¥{{ item.total_money }}</text>
					</view>
					<view class="butbox" v-if="item.status==5" @click.stop="handldexamine(list[index].ref_id)">
						审核
					</view>
				</view>
			</view>
		</view>

		<view v-if="isEnd && !loading && !list.length" class="pt-30p">
			<u-empty mode="order" textSize="32" iconSize="200"> </u-empty>
		</view>

		<view class="py-30" v-if="!list.length && !isEnd">
			<u-loadmore fontSize="32" iconSize="32" :status="status" />
		</view>
		<adminBottomTab></adminBottomTab>
	</view>
</template>
<script>
import adminBottomTab from "../../components/admin-bottom-tab.vue"
import request from "../../utils/admin-request.js"
export default {
	components: { adminBottomTab },
	data() {
		return {
			keyword: "",
			tabList: [
				{
					name: "全部",
					id: '',
				},
				{
					id: 0,
					name: "待付款",
				},
				{
					id: 1,
					name: "待核销",
				},{
					id: 2,
					name: "已核销",
				},
				{
					id: 5,
					name: "待售后",
				},
			],//status订单状态 0待付款 1待发货/待核销/待派单 2待收货/已核销/已派单 3待评价  4已取消  5售后退款中  6已完成  7售后完成 
			current: 0,
			page: 1,
			loading: false,
			isEnd: false,
			list: [],
			order_type:'',
		}
	},
	computed: {
		status() {
			if (this.loading) return "loading"
			if (this.isEnd) return "nomore"
			if (!this.isEnd && this.loading) return "loadmore"
		},
	},
	onLoad(option) {
		this.order_type = option.order_type
		this.getList()
	},
	onReachBottom() {
		this.getList()
	},

	methods: {
		init(){
			this.loading = false
			this.list = []
			this.isEnd = false
			this.page = 1
		},
		search(){
			this.init()
			this.getList()
		},
		tabChange(e) {
			this.init()
			this.current = e.index
			this.getList()
		},
		async getList() {
			if (this.loading || this.isEnd) {
				return
			}
			try {
				this.loading = true
				let { data } = await request({
					url: "/api/merch/orderList",
					data: {
						page_index: this.page,
						page_size: 20,
						status: this.tabList[this.current].id,
						keyword:this.keyword,
						order_type:this.order_type,
					},
				})
				this.list = [...this.list, ...data]
				if (data.length < 20) {
					this.isEnd = true
				}
				this.page += 1
			} finally {
				this.loading = false
			}
		},
		handldexamine(id) {
			console.log(id, 'item')
			uni.showModal({
				title: '提示',
				content: '确认审核改订单吗？',
				confirmText: '同意售后',
				cancelText: '拒绝售后',
				success: async (res) => {
					if (res.confirm) {
						await this.$http({
							url: 'api/merch/checkRefound',
							data: {
								id: id
							}
						}).then(mag => {
							uni.showToast({
								title: mag.msg,
								icon: 'none'
							})
							setTimeout(()=>{
								this.search()
							},1500)
						})
		
					} else if (res.cancel) {
						await this.$http({
							url: 'api/merch/rejectRefound',
							data: {
								id: id
							}
						}).then(mag => {
							uni.showToast({
								title: mag.msg,
								icon: 'none'
							})
							setTimeout(()=>{
								this.search()
							},1500)
						})
					}
				}
			});
		},
	},
}
</script>
<style lang="scss">
.order-container {
	display: grid;

	.order-item {
		margin-top: 20rpx;
	}
	.order-list .order-item:first-child {
		margin-top: 0;
	}
	.order-product {
		padding: 20rpx;
		display: flex;
		flex-direction: column;
		gap: 20rpx;
		.order-product-item {
			display: flex;
			align-items: flex-start;
			gap: 20rpx;
			.image {
				height: 170rpx;
				width: 170rpx;
				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
}
.butbox {
		width: fit-content;
		height: 55rpx;
		line-height: 55rpx;
		padding: 0 20rpx;
		border: solid 2rpx #666666;
		border-radius: 26rpx;
		color: #222222;
	}
</style>
